<template>
  <div class="contact-list">
    <header-tab>
      <span slot="left" @click="Go_back"><van-icon name="arrow-left" /></span>
      <span slot="title">编辑联系人</span></header-tab
    >
    <van-contact-list v-model="chosenContactId" :list="list" @add="onAdd" @edit="onEdit" @select="onSelect" />
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex';

import HeaderTab from '../components/HeaderTab.vue';
export default {
  ...mapState['linkManID'],
  ...mapMutations['updatalinkManID'],
  components: { HeaderTab },
  props: ['id'],
  data() {
    return {
      // contactData: null,
      chosenContactId: 1,
      list: [],
    };
  },
  methods: {
    //获取联系方式信息
    getcontactData() {
      const url = `user/contact`;
      let params = `user_id=${sessionStorage.getItem('UserID')}`;
      this.axios.post(url, params).then(res => {
        console.log(res);
        this.list = res.data.data;
      });
    },
    Go_back() {
      this.$router.go(-1);
    },
    // 跳转至新增联系人页面
    onAdd() {
      this.$router.push('/contactadd');
    },
    // 跳转至联系人编辑页面
    onEdit() {
      this.$router.push({
        name: 'contactedit',
        query: {
          manid: this.chosenContactId,
        },
      });
      this.$route.query.name;
    },

    onSelect(contact) {
      console.log('选择' + contact.id);
      this.$store.commit('updatalinkManID', contact.id);
      console.log(this.$store.state.linkManID);
    },
  },
  mounted() {
    this.getcontactData();
  },
};
</script>

<style lang="scss" scoped></style>
